<script setup>
import { onMounted, nextTick, ref, reactive, watch, computed, watchEffect } from 'vue'
import info from '../assets/img/info.png'
import infoActive from '../assets/img/info_active.png'
import input from '../assets/img/input.png'
import inputActive from '../assets/img/input_active.png'
import chart from '../assets/img/chart.png'
import chartActive from '../assets/img/chart_active.png'
// import pt from '../assets/img/pt.png'
// import ptActive from '../assets/img/pt_active.png'
import { useRouter } from 'vue-router'
import chun from '../stores/chun.js'
const router = useRouter()
const paths = ref([
  { name: '录入', path: '/input', icon: input, iconActive: inputActive, title: '卸载信息' },
  { name: '记录', path: '/info', icon: info, iconActive: infoActive, title: '历史记录' },
  { name: '统计', path: '/chart', icon: chart, iconActive: chartActive, title: '统计结果' },
  // { name: '统计', path: '/chart', icon: chart, iconActive: chartActive, title: '统计结果' },
  // { name: '处置', path: '/pt', icon: pt, iconActive: ptActive, title: '平台信息' }
])

let userInfo = localStorage.getItem('userInfo')
let data = JSON.parse(userInfo)
// console.log(data);
if (data.id) {
  chun.userInfo = data
}

paths.value = paths.value.map(item => {
  if (chun.userInfo.role === 'jh') {
    if (item.path != '/chart') {
      return item
    }
  } else if (chun.userInfo.role === 'ym') {
    if (item.path == '/info') {
      return item
    }
  } else {
    if (item.path != '/input') {
      return item
    }
  }
})

// 去除数组中的undefined
paths.value = paths.value.filter(item => item)


const avtivePath = ref(paths.value[0].path)
const title = ref(paths.value[0].title)

const handleRT = (item) => {
  title.value = item.title
  avtivePath.value = item.path
  router.push(item.path)
}
</script>

<template>
  <div id="home">
    <section id="home_main">
      <router-view></router-view>
    </section>
    <section id="home_bottom">
      <!-- 底部导航栏 -->
      <div v-for="item in paths" class="bbb" @click="handleRT(item)">
        <img :src="avtivePath === item.path ? item.iconActive : item.icon" alt="">
        <div class="bd" :style="{ color: avtivePath === item.path ? '#12BDA7' : 'black' }">{{ item.name }}</div>
      </div>
    </section>
  </div>
</template>

<style lang="less" scoped>
#home {
  height: 100vh;
  width: 100vw;



  #home_main {
    height: calc(100vh - 80px);
    // background-color: #E2F4F4;
  }

  #home_bottom {
    height: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;


    // background-color: #f0f0f0;
    .bbb {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .bd {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      img {
        width: 25px;
        height: 25px;
      }

      span {
        font-size: 12px;
      }
    }
  }
}
</style>